.menu-bar {
  width: 80px;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  //菜单工具样式
  .menu-bar-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 8px;
    margin-top: 16px;


    .menu-bar-icon {
      display: flex;
      justify-content: center;
      width: 50px;
      height: 50px;
      color: white;
    }

    .tool-icon-active {
      //color: var(--color-primary);
      background-color: var(--background-secondary);
      border-radius: 8px;
      transition: background-color 0.3s;

      .menu-bar-icon {
        color: var(--color-primary);
      }

      &:hover {
        background-color: var(--background-secondary);
      }
    }

  }
}

//媒体查询适配移动端
@media only screen and (max-width: 640px) {
  .menu-bar {
    width: 100%;
    padding: 10px;
    background-color: #3b3b3b;
    border-radius: 2vw;
    .menu-bar-tool{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 100%;
      gap: 10vw;
      margin-top: 0;


      .tool-icon-active {
        //color: var(--color-primary);
        background-color: transparent;
        border-radius: 8px;
        transition: background-color 0.3s;

        .menu-bar-icon {
          color: #07c160;
        }

        &:hover {
          color: #07c160;
        }
      }

    }
  }

}
